<template>
  <h3>请选择一张试卷作为考试试卷</h3>
  <div class="table-container">
    <table class="test-table">
      <thead>
        <tr>
          <th>试卷名称</th>
          <!-- <th>组卷方式</th> -->
          <!-- <th>试卷分类</th> -->
          <th>总分</th>
          <!-- <th>创建人</th> -->
          <th>创建时间</th>
          <!-- <th>人工批阅</th> -->
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(test, index) in testData" :key="index">
          <td>
            <span class="green-text">
              {{ test.paperName }}
            </span>
          </td>
          <!-- <td>{{ test.assemblyMethod }}</td>
          <td>{{ test.category }}</td> -->
          <td>{{ test.score }}</td>
          <!-- <td>{{ test.creator }}</td> -->
          <td>{{ test.createTime }}</td>
          <!-- <td>
            <span :class="{ 'red-text': test.manualReview === '是', 'gray-text': test.manualReview === '否' }">
              {{ test.manualReview }}
            </span>
          </td> -->
          <td>
            <button  @click="showExam(test)" class="action-button">
              <span  class="check-icon"></span>
              选择
            </button>
          </td>
        </tr>
      </tbody>
    </table>

      <Pagination
      :totalItems="totalPages"
      :itemsPerPage="8"
      :initialPage="1"
      @page-change="handlePageChange"
    />


    <Loading
      :size="60"
      color="#4CAF50"
      shadowColor="#A5D6A7"
      :speed="0.6"
      :loading="loading"
      backgroundColor="rgba(255, 255, 255, 0.8)">
</Loading>
  </div>


</template>

<script setup>
import { ref ,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import { ExamService } from '@/api/exam';
import Pagination from '@/components/commont/Pagination.vue';

const router=useRouter();
const totalPages=ref(1);
const  currentPage=ref(1);
const  loading=ref(false);
const currentPaper=ref()
const show=ref(true);


const testData = ref([
  {
    paperName: '0312',
    assemblyMethod: '抽题组卷',
    category: '理科',
    score: 40,
    creator: '超管A',
    createTime: '2025-03-12 15:46:34',
    manualReview: '否'
  },
  {
    paperName: 'test0311',
    assemblyMethod: '抽题组卷',
    category: '理科',
    score: 5,
    creator: '超管A',
    createTime: '2025-03-11 11:27:47',
    manualReview: '是'
  },
  {
    paperName: 'dfgh',
    assemblyMethod: '选题组卷',
    category: '全部分类',
    score: 76,
    creator: '超管A',
    createTime: '2025-02-28 12:42:04',
    manualReview: '是'
  },
  {
    paperName: 'zjf',
    assemblyMethod: '随机组卷',
    category: '',
    score: 24,
    creator: '超管A',
    createTime: '2025-02-28 08:26:00',
    manualReview: '否'
  },
  {
    paperName: '23',
    assemblyMethod: '选题组卷',
    category: '社会学',
    score: 10,
    creator: '超管A',
    createTime: '2025-02-26 15:49:54',
    manualReview: '否'
  },
  {
    paperName: '111',
    assemblyMethod: '选题组卷',
    category: '社会学',
    score: 35,
    creator: '超管A',
    createTime: '2025-02-10 10:58:45',
    manualReview: '是'
  },
  {
    paperName: '公开试卷',
    assemblyMethod: '抽题组卷',
    category: '全部分类',
    score: 100,
    creator: '超管A',
    createTime: '2025-01-16 14:55:31',
    manualReview: '是'
  }
]);

const loadPapers= async (page)=>{
  loading.value=true;
   const response= await ExamService.getPaper({page: page ,pageSize: 8})
   testData.value=response.data;
   totalPages.value=response.map.totalPage;
   currentPage.value=response.map.currentPage;
  loading.value=false;
 }


const  handlePageChange = (pageData)=>{
  currentPage.value = pageData.page;
  loadPapers(currentPage.value);
 console.log(pageData)
};

const showExam =(test)=>{
  router.push({
  path: `/paperConfig/${test.id}` // 将 id 替换为实际值
});
};



onMounted(() => {
  loadPapers();
});

</script>

<style scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
  background-color: #f5f7fa;
  padding: 16px;
}

.test-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
}

.test-table th {
  background-color: #f5f7fa;
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
}

.test-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
}

.green-text {
  color: #67c23a;
}

.red-text {
  color: #f56c6c;
}

.gray-text {
  color: #909399;
}

.action-button {
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.check-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  position: relative;
}

.check-icon::before {
  content: "✓";
  font-size: 14px;
  font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .test-table {
    font-size: 14px;
  }

  .test-table th,
  .test-table td {
    padding: 8px 10px;
  }

  .action-button {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>
